<template>
  <el-table :data="list" style="width: 100%;padding-top: 15px;">
    <el-table-column label="文章标题" min-width="200">
      <template slot-scope="scope">
        {{scope.row.title}}
      </template>
    </el-table-column>
    <el-table-column label="添加者" width="195" align="center">
      <template slot-scope="scope">
        {{scope.row.author}}
      </template>
    </el-table-column>
    <el-table-column label="状态" width="100" align="center">
      <template slot-scope="scope">
        <el-tag :type="scope.row.status | statusFilter">已审核</el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { fetchList } from '@/api/transaction'

export default {
  data() {
    return {
      list: [
        {
          title: '爱尔兰推翻堕胎禁令 众多女性坐数十小时飞机回国公投',
          author: '谢主任'
        },
        {
          title: '村上春树怎么办？2019诺贝尔文学奖或也将“难产”',
          author: '谢主任'
        },
        {
          title: '卡塔尔禁止进口沙特等四国产品',
          author: '谢主任'
        },
        {
          title: '多地楼市库存告急 更为密集的调控潮或将到来',
          author: '谢主任'
        },
        {
          title: '上海今起乘地铁扫码进站可使用微信支付',
          author: '谢主任'
        }
      ]
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        success: 'success',
        pending: 'danger'
      }
      return statusMap[status]
    }
  },
  created() {
    this.list = this.list.concat(this.list);
  },
  methods: {
    fetchData() {
      fetchList().then(response => {
        this.list = response.data.items.slice(0, 8)
      })
    }
  }
}
</script>
